<template>
	<view style="height: 100%;">
		<backheader :title="title" :closecardflag="closecardflag" :checkflag="checkflag"></backheader>
		<view class="mainMenu">
			<view class="mmitem" :class="{mmactive: mmactiveflag === 1}" @click="changeMm(1)">我参与的</view>
			<view class="mmitem" :class="{mmactive: mmactiveflag === 2}" @click="changeMm(2)">参与历史</view>
			<view class="mmitem" :class="{mmactive: mmactiveflag === 3}" @click="changeMm(3)">全部</view>
		</view>
		<view style="height: 72upx;">
			<ren-dropdown-filter :filterData='filterData' :defaultIndex='defaultIndex'
			    @onSelected='onSelected'></ren-dropdown-filter>
		</view>
		<view class="content">
			<scroll-view scroll-y="true" style="height: calc(100vh - 330upx);" @scrolltolower="loadMore">
				<view class="conItem" v-for="item in dataList" :key="item.wtId" @tap="goItem(item.wtWorkTicket.wtId, filterTypeName(item.wtWorkTicket.wtTypeId))">
					<view class="conItemTitle">
						{{item.wtWorkTicket.locaName}}
					</view>
					<view class="wkcoline">
						<view style="width:40%;padding-left: 15upx;color:#666666">{{item.wtWorkTicket.wtNo}}</view>
						<view style="width:30%;color:#1E91E6">{{filterTypeName(item.wtWorkTicket.wtTypeId)}}</view>
						<view style="width:30%;text-align: right;color:#f65656;">
							  {{stateInfo[item.wtWorkTicket.state]}}
						</view>
					</view>
					<view class="styline">
						<view class="wktap">设备位置</view>
						<view class="wktapcont">{{item.wtWorkTicket.locaNo}}</view>
						<view class="wktapman">{{item.wtWorkTicket.operationDeptName}}</view>
					</view>
					<view class="styline">
						<view class="wktap">工作负责人</view>
						<view class="wktapcont">{{item.wtWorkTicket.workDeptName}}</view>
						<view class="wktapman">{{item.wtWorkTicket.managerName}}</view>
					</view>
					<view class="styline stylineEnd">
						<view class="wktap">计划时间</view>
						<view class="wktapcontDate">{{item.wtWorkTicket.planStartTime}}-{{item.wtWorkTicket.planEndTime}}</view>
						
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import backheader from "@/components/backHeader/backHeader.vue";
	import { stationList } from '@/api/common.js'
	import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
    import { getWorkTicketList ,getWorkTicketType} from '@/api/operationPicket.js'
	export default {
		components:{
			backheader,
			RenDropdownFilter
		},
		data() {
			return {
				//backheader
				title:"工作票列表",
				closecardflag:true,
				checkflag:true,
				//页面
				allPages:0,
				mmactiveflag:1,
				filterData:[
						[{text: '工作票类型', value: ''}],
						[{ text: '场站', value: '' }],
						[
							{ text: '状态', value: '' },
							{ text: '待执行', value: 4 },
							{ text: '拟定', value: 1 }, 
							{ text: '审核中', value: 2 }, 
							{ text: '已作废', value: 3 },
							{ text: '执行中', value: 5 },
							{ text: '已执行', value: 6 },
							{ text: '终止执行', value: 7 },
							{ text: '关闭（合格', value: 8 },
							{ text: '关闭（不合格）', value: 9 }
						]
				],
				defaultIndex:[0,0,0],
				dataList: [],
				filterForm: {
					localIds:'',
					state: '',
					current: 1,
					wtTypeId: '',
					size: 20
					
				},
				stateInfo: {
					1:'拟定',
					2:'审核中',
					3:'已作废',
					4:'待执行',
					5:'执行中',
					6:'已执行',
					7:'终止执行',
					8:'关闭（合格）',
					9:'关闭（不合格）'
				}
			
			}
		},
		onLoad(){
			this.getStation()
			this.otWorkTypeList()
		},
		methods: {
			onSelected(val) {
				console.log(val)
				this.filterForm.localIds = val[1][0].value
				this.filterForm.wtTypeId = val[0][0].value
				this.filterForm.state = val[2][0].value
				this.queryWorkTicket()
			},
			changeMm(index){
				this.isShow = false
				if(index==1){
					this.defaultIndex = [0,0,1]
					this.mmactiveflag = 1
					this.filterForm = {
						current: 1,
						size: 20,
						status: 4
					}
					this.queryWorkTicket()
				}else if(index == 2){
					this.defaultIndex = [0,0,0]
					this.mmactiveflag = 2
					this.filterForm = {
						current: 1,
						size: 20
					}
					this.queryWorkTicket()
				}else if(index == 3){
					this.defaultIndex = [0,0,0]
					this.mmactiveflag = 3
					this.filterForm = {
						current: 1,
						size: 20
					}
					this.queryWorkTicket()
				}
				setTimeout(() => {
					this.isShow = true
				})
			},
			goItem(id, type){
				 uni.navigateTo({
					url:'/pages/twotickets/wkticketInfo/wkticketInfo?id='+id+'&type='+type
				});
			},
			loadMore() {
				if (this.allPages === this.filterForm.current) {
					return
				}
				this.filterForm.current++
				this.queryWorkTicket()
			},
			// 场站
			getStation() {
				stationList({parameters: [{key: "key", value: "cz"}]}).then(res => {
					if(res.state === 200) {
						res.data.dataResult.forEach(item=> {
							this.filterData[1].push({text: item['NAME_'], value: item['ID_']})
						})
						this.filterForm.operationDeptId = this.filterData[1][0].value
						this.isShow = true
					}
				})
			},
			queryWorkTicket(){
				getWorkTicketList(this.filterForm).then(res=>{
					if(res.success) {
						if (this.filterForm.current === 1) {
							this.dataList = res.result.result.records
						} else {
							this.dataList= this.dataList.concat(res.result.result.records)
						}
						this.allPages = res.result.result.pages
					}
				})
			},
			filterTypeName(val) {
				console.log(val)
				console.log(this.filterData[0])
				let name = ''
				this.filterData[0].forEach(item => {
					if (item.value == val) {
						name = item.text
					}
				})
				console.log(name, 'name2222222')
				return name	
			},
			// 类型
			otWorkTypeList(state){
				getWorkTicketType().then(res=>{
					if(res.success) {
						res.result.result.records.forEach(item=> {
							this.filterData[0].push({text: item.wtTypeName, value: item.wtTypeId})
						})
						this.filterForm.otTypeId = this.filterData[0][0].value
						this.isShow = true
					}
					this.queryWorkTicket(4)
				})
			}
		}
	}
</script>

<style>
	page{
		background-color: #f9f9f9;
	}
.mainMenu{
	height: 88upx;
	line-height: 88upx;
	text-align: center;
	display: flex;
}
.mmitem{
	flex: 1;
	text-align: center;
	font-size: 28upx;
	color: #333333;
}
.mmactive{
	border-bottom: solid 4upx #1E91E6;
}
.content{
	height: calc(100vh - 318upx);
	padding:15upx;
	padding-top: 60upx;
}
.conItem{
	padding: 15upx;
	padding-bottom: 25upx;
	background-color: #ffffff;
	border-radius: 20upx;
	margin-bottom: 28upx;
}
.conItemTitle{
	font-size: 28upx;
	padding: 15upx;
	padding-right: 0upx;
	line-height: 34upx;
}
.wkcoline{
	display: flex;
	border-bottom: solid 1upx #e7e7e7;
	padding-bottom: 15upx;
}
.styline{
	display: flex;
	margin-left: 15upx;
	margin-right: 15upx;
	padding-top: 20upx;
	border-bottom: solid 1upx #e7e7e7;
	padding-bottom: 15upx;
}
.wktap{
	width: 20%;color:#999999
}
.wktapcont{
	width: 60%;color:#666666
}
.wktapman{
	width: 20%;color:#666666;text-align: right;
}
.wktapcontDate{
	width: 80%;color:#666666
}
</style>
